<template>
    <h1>VUE 内置指令汇总</h1>

    <!-- <p>{{ msg }}</p>
    <p v-text="msg"></p>
    <div v-text="msg2"></div> -->

    <!-- <div v-html="msg2"></div> -->

    <!-- <p> {{ msg }} </p>
    <p v-pre> {{ msg }} </p> -->

    <!-- <p>{{ num }}</p>
    <p v-once>{{ num }}</p>
    <button @click="num++">num 自增</button> -->


    <!-- <p>{{ num }}</p>
    <p v-memo="[msg, msg2]">{{ num }}</p>
    <button @click="num++">num 自增</button>
    <button @click="msg = '新的字符串'">修改 msg</button> -->
</template>

<script>
export default {
    data() {
        return {
            num: 0,
            msg: "一个字符串",
            msg2: '<p style="color: red;">我是一个p标签</p>',
        };
    },
};

/**
 *  1. v-text
 *      用于文本替换, 会替换标签内原本的所有文本
 *  2. v-html
 *      也是用于文本替换, 能够认识文本中的 html 和 css
 *      但是不推荐使用
 *  3. v-show
 *      通过 css 控制标签展示还是隐藏
 *  4. v-if/v-else/v-else-if
 *      通过 是否加载标签, 来控制标签展示还是隐藏
 *  5. v-for
 *      遍历一组数据, 循环渲染一些标签
 *  6. v-on/@
 *      绑定一些事件
 *  7. v-bind/:
 *      绑定一些属性
 *  8. v-model
 *      双向绑定数据
 *  9. v-slot
 *      插槽内需要使用的指令
 *  10. v-pre
 *      跳过 vue 的编译
 *  11. v-once
 *      只会被编译一次, 后续的编译与当前标签没有关系
 *  12. v-memo
 *      只有绑定的依赖发生变化的时候, 才会重新渲染标签
 *  13. v-cloak
 *      用于隐藏尚未完成编译的 DOM 模板。
 */
</script>

<style></style>
